import React, { PureComponent } from 'react'
import { LoginWrapper, LoginBox, LoginInput, LoginBtn } from './style'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { Redirect } from 'react-router-dom'
class Login extends PureComponent {
  componentDidMount() {}
  render() {
    const { loginStatus } = this.props
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <LoginInput placeholder="账号" ref={(input) => (this.account = input)} />
            <LoginInput placeholder="密码" type="password" ref={(input) => (this.password = input)} />
            <LoginBtn onClick={() => this.props.login(this.account.value, this.password.value)}>登录</LoginBtn>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to="/" />
    }
  }
}

const mapStateToProps = (state) => {
  return {
    loginStatus: state.getIn(['login', 'login']),
  }
}

const { login } = actionCreators
const mapDispatchToProps = { login }

export default connect(mapStateToProps, mapDispatchToProps)(Login)
